﻿import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1
Rectangle {
    id: rectangle1
    color:"transparent"//Qt.rgba(97/255,178/255,244/255,1)
    anchors.fill: parent
    width: 400
    height: 600

    Component.onCompleted: console.log("button qml component")

    ColumnLayout{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.topMargin: 20
        spacing: 30

        Button {
            text: "Button"
            implicitWidth: 120
            implicitHeight: 30
        }
        Button {
            text: "Button"
            style: ButtonStyle {
                background: BorderImage {
                    source: control.pressed ? "images/button-pressed.png" : "images/button.png"
                    border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
                }
            }
            implicitHeight: 30
            implicitWidth: 120
        }
        Button {
            text: "Button"
            style: buttonStyle
            implicitWidth: 120
        }

        Button {
            text: "Button"
            style: ButtonStyle{
                background:Rectangle {
                    border.width: control.activeFocus ? 2 : 1
                    border.color: "#888"
                    gradient: Gradient {
                        GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                        GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
                    }
                }
            }
            implicitHeight:40
            implicitWidth: 120
        }
        Button {
            text: "OK"
            style: ButtonStyle{
                background:Rectangle {
                    border.color: "transparent"
                    radius: control.height
                    color:control.pressed?"#df72cbfb":"#72cbfb"
                }
                label: Text{
                    id:btntext
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: control.text
                    color:"white"
                }
            }
            implicitHeight:40
            implicitWidth: 120
        }


        Item{
            Layout.fillHeight: true
        }
    }

    property Component buttonStyle: ButtonStyle {
        background: Rectangle {
            implicitHeight: 30
            implicitWidth: 120
            color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"
            antialiasing: true
            border.color: "gray"
            radius: height/2
            Rectangle {
                anchors.fill: parent
                anchors.margins: 1
                color: "transparent"
                antialiasing: true
                visible: !control.pressed
                border.color: "#aaffffff"
                radius: height/2
            }
        }
    }

}

